<template>
  <!--input输入框和下拉框组合-->
  <div class="box borderPadding" v-if="configData && configData.isShow === 1">
    <div class="c_row-item">
      <div class="title labelwidth">
        {{ configData.title }}
      </div>
      <div class="slider-box ml22">
        <div>
          <el-input size="small" icon="ios-arrow-forward" :disabled="configData.isDisabled ? true : false"
            v-model="configData.val" :placeholder="configData.place" :maxlength="configData.max"
            @blur="(value) => handleChange(value, configData.val)">
            <!-- <el-button slot="append" icon="el-icon-arrow-right" @click="getLink(configData)"></el-button> -->
            <el-dropdown slot="append" @command="(command) => handleCommand(command, configData)">
              <span class="el-dropdown-link">
                影片类型<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="v.name" v-for="v in typeListArr">{{ v.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </div>
      </div>
    </div>
    <linkaddress ref="linkaddres" @linkUrl="linkUrl"></linkaddress>
  </div>
</template>

<script>
// 这是个输入框input输入框和下拉框组合
import linkaddress from '@/components/linkaddress';
export default {
  name: 'c_input_select',
  props: {
    configObj: {
      type: Object,
    },
    configNme: {
      type: String,
    },
  },
  components: {
    linkaddress,
  },
  data() {
    return {
      value: '',
      defaults: {},
      configData: {},
      typeListArr: [],
    };
  },
  created() {
    this.defaults = this.configObj;
    this.configData = this.configObj[this.configNme];
  },
  mounted() {
    this.typeListArr = JSON.parse(localStorage.getItem('typeList'))
  },
  watch: {
    configObj: {
      handler(nVal, oVal) {
        this.defaults = nVal;
        this.configData = nVal[this.configNme];
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleCommand(com, v) {
      // console.log('=======handleCommand======',       this.typeListArr.find(v=>v.name===com)._id);
      let typeId = this.typeListArr.find(v => v.name === com)._id
      this.$emit('getConfig', { name: 'linkType', values: com, typeId });
    },
    linkUrl(e) {
      this.configData.val = e;
      this.$emit('getConfig', { name: 'c_input', values: this.configData.val });
    },
    // getLink(data) {
    //   // if (title !== '链接' && title !== '更多链接') {
    //   //   return;
    //   // }
    //   this.$refs.linkaddres.dialogVisible = true;
    //   if (data.title = '更多类型')
    //     // console.log('=======getLink======', data.val);
    //     this.$emit('getConfig', { name: 'linkType', values: data.val });
    // },
    handleChange(_, v) {
      // console.log('=============',v);
      this.$emit('getConfig', { name: 'inputType', values: v });
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 12px;
  color: #999;
}

::v-deep .el-input--medium,
::v-deep.ivu-input {
  font-size: 12px !important;
}

.c_row-item {
  margin-bottom: 20px;
}

.slider-box {
  ::v-deep.el-input__suffix {
    top: 10px !important;
  }
}

.label {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
